<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>后台管理中心</title>
    <link rel="stylesheet" th:href="@{css/pintuer.css}">
    <link rel="stylesheet" th:href="@{css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{js/jquery.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

    <script>
        $(function () {
            // 点击头像弹出更换头像的模态窗口
            $("#head-img").click(function () {
                $("#headPortraitModal").modal("show");
            });

            // 模拟文件上传按钮点击
            $("#file-btn").click(function () {
                return $("#file-input").click();
            });

            // 给"保存"按钮添加点击事件
            $("#save-head-portrait-btn").click(function () {
                // 收集参数
                let fileName = $("#file-input").val();
                let suffix = fileName.substr(fileName.lastIndexOf(".") + 1).toLocaleLowerCase();//jpg,Jpg,....
                if (suffix != "jpg") {
                    alert("只支持jpg文件");
                    return;
                }
                let file = $("#file-input")[0].files[0];
                if (file.size > 5 * 1024 * 1024) {
                    alert("文件大小不超过5MB");
                    return;
                }
                //FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
                //FormData最大的优势是不但能提交文本数据，还能提交二进制数据
                let formData = new FormData();
                formData.append("file", file);

                //发送请求
                $.ajax({
                    url: '/backstage/index/file',
                    data: formData,
                    processData: false,//设置ajax向后台提交参数之前，是否把参数统一转换成字符串：true--是,false--不是,默认是true
                    contentType: false,//设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码：true--是,false--不是，默认是true
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            window.location.href = "/backstage/index";
                            // $("#headPortraitModal").modal("hide");
                        } else {
                            //提示信息
                            alert(data.message);
                            //模态窗口不关闭
                            $("#headPortraitModal").modal("show");
                        }
                    }
                });
            });
        });
    </script>
</head>
<body style="background-color:#f2f9fd;">

<div class="header bg-main">
    <div class="logo margin-big-left fadein-top">
        <img id="head-img" th:src="${imgUrl}" class="radius-circle rotate-hover" height="50"
             style="width: 50px;height: 50px;"/>
        <span style="font-size: 24px;">后台管理中心</span>
    </div>
    <div class="head-l">
        <a class="button button-little bg-green" th:href="@{/proscenium/index}" target="_blank">
            <i class="bi bi-house-door-fill"></i>前台首页</a>&nbsp;&nbsp;
        <a class="button button-little bg-blue">
            <i class="bi bi-wrench"></i>清除缓存</a> &nbsp;&nbsp;
        <a class="button button-little bg-red" th:href="@{/backstage/goOut}">
            <i class="bi bi-power"></i>退出登录</a>
    </div>
</div>

<div class="leftnav">
    <div class="leftnav-title"><strong><i class="bi bi-list"></i>菜单列表</strong></div>
    <h2><i class="bi bi-person-circle"></i>基本设置</h2>
    <ul style="display:block">
        <li><a th:href="@{/backstage/manager/list}" target="right"><i class="bi bi-caret-right-fill"></i>管理员列表</a></li>
        <li><a th:href="@{/backstage/manager/add}" target="right"><i class="bi bi-caret-right-fill"></i>添加管理员</a></li>
    </ul>
    <h2><i class="bi bi-pencil-square"></i>栏目管理</h2>
    <ul>
        <li><a th:href="@{/backstage/column/list}" target="right"><i class="bi bi-caret-right-fill"></i>栏目列表</a></li>
        <li><a th:href="@{/backstage/column/add}" target="right"><i class="bi bi-caret-right-fill"></i>添加栏目</a></li>
    </ul>
    <h2><i class="bi bi-pencil-square"></i>文章管理</h2>
    <ul>
        <li><a th:href="@{/backstage/article/list}" target="right"><i class="bi bi-caret-right-fill"></i>文章列表</a></li>
        <li><a th:href="@{/backstage/article/add}" target="right"><i class="bi bi-caret-right-fill"></i>添加文章</a></li>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        $(".leftnav h2").click(function () {
            $(this).next().slideToggle(200);
            $(this).toggleClass("on");
        })
        $(".leftnav ul li a").click(function () {
            $("#a_leader_txt").text($(this).text());
            $(".leftnav ul li a").removeClass("on");
            $(this).addClass("on");
        })
    });
</script>
<ul class="bread">
    <li><a th:href="@{/backstage/main}" target="right" class="bi bi-house-door-fill"> 首页</a></li>
    <li><a href="##" id="a_leader_txt">网站信息</a></li>
    <li><b>当前语言：</b><span style="color:red;">中文</php></span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;切换语言：<a href="##">中文</a> &nbsp;&nbsp;<a href="##">英文</a></li>
</ul>
<div class="admin">
    <iframe scrolling="auto" rameborder="0" name="right" width="100%" height="100%"
            src="http://localhost/backstage/main"></iframe>
</div>

<!-- 头像上传模态窗口 -->
<div class="modal fade" id="headPortraitModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                </button>
                <h4 class="modal-title">更换头像</h4>
            </div>
            <div class="modal-body">
                <img th:src="${imgUrl}" style="width: 200px;height: 200px">
                <input type="file" style="display: none" id="file-input">
                <button class="btn btn-info" id="file-btn">选择图片</button>
                <span style="font-size: 12px;">目前只支持jpg格式</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-head-portrait-btn">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>